// 1. 导入所需的包
import Vue from 'vue'
import Vuex from 'vuex'

// 2. 将Vuex注册为Vue的插件
Vue.use(Vuex)

// 3. 创建 store 实例对象
const store = new Vuex.Store({
  /* 这里配置Vuex */
  strict: true, // 开启vuex的严格模式，开启后，就绝对不允许在组件中修改数据了
  // ----------------- 存数据：仓库中的数据都放到 state 中 ------------------
  state: {
    age: 20,
    list: [
      { id: 1, name: '宋江' },
      { id: 2, name: '吴用' }
    ]
  },
  // mutations 里面放同步方法；用于更新state数据，而且是更新state数据的【唯一】方案
  // 所有mutation方法的第1个参数，都是state，目的就是为了方便找到数据
  mutations: {
    updateAge (state, n) {
      state.age = n
    }
  },
  // actions 里面专门放异步方法的，比如ajax请求、定时器等等....
  actions: {
    updateAgeAfter2s (store, m) {
      setTimeout(() => {
        store.commit('updateAge', m)
      }, 2000)
    }
  },
  // getters 是仓库中的计算属性，也需要返回计算的结果，和组件中计算属性的差别是，这里的计算属性不能修改
  getters: {
    pingfang (state) {
      return state.age * state.age
    }
  }
})

// 4. 导出 store 对象
export default store
